<template>
  <div class="container">
    <!-- <div style="display: flex; background: #fff">
      <img
        :src="avter"
        alt=""
        style="
          border-radius: 25px;
          width: 30px;
          height: 30px;
          margin: 10px 5% 0px 5%;
        "
      />
      <p>{{ positionName }}</p>
    </div>
    <div
      class="divp"
      style="
        height: auto;
        width: 100%;
        padding: 0px 5% 8px 5%;
        background: #fff;
        color: #8d8e8eee;
        font-size: 12px;
      "
      v-html="tiw"
    ></div> -->

    <!-- tab卡 -->
    <div
      style="width: 94%; margin: auto; padding-top: 6px"
      ref="tabdiv"
      v-if="$route.query.id == '1'"
    >
      <ul style="width: 100%; float: left; flex-wrap: wrap" ref="tabul">
        <li
          v-for="(vlu, index) in tabvlue"
          :key="vlu.id"
          style="width: 20%; float: left; border-radius: 4px; margin-top: 0px"
          :style="index % 4 != 0 ? 'margin-left: 0%' : null"
          :class="vlu.id == active ? 'getback' : 'pubak'"
          @click="ontap(index, vlu.id)"
        >
          <p style="width: 100%; text-align: center; margin: 4px 0">
            <span
              style="
                padding: 0px 2px;
                text-overflow: ellipsis;
                white-space: nowrap;
                overflow: hidden;
                width: 100%;
              "
              class="tanspan"
              >{{ vlu.tab }}</span
            >
          </p>
        </li>
      </ul>
    </div>
    <div style="width: 94%; margin: auto">
      <ul style="width: 100%; float: left; padding: 14px 0">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <li
            v-for="(item, index) in images"
            :key="index"
            :style="index % 4 ? 'margin-left:2.5%' : null"
            :class="index > 3 ? 'martop' : null"
            style="width: 23%; float: left"
            @click="quere(item, index)"
          >
            <div
              :style="{
                background: `url(${item}) no-repeat`,
                backgroundSize: '100% 100%',
                borderRadius: '11%',
                width: '100%',
                height: `${getimhi}px`,
              }"
              style="display: flex; flex-flow: column; align-items: center"
              ref="imghei"
            >
              <img
                :src="choise"
                alt=""
                style="width: 100%; height: 100%"
                v-show="index === actv"
              />
            </div>
          </li>
        </van-list>
      </ul>
    </div>
    <!-- 
    <div
      style="
        position: fixed;
        bottom: 20px;
        width: 100%;

        text-align: center;
        height: 30px;
      "
    >
      <p
        style="
          width: 70%;
          margin: auto;
          text-align: center;
          height: 30px;
          line-height: 30px;
          border-radius: 5px;
          color: #fff;
          background: #ffaa25;
        "
        @click="sure()"
      >
        <b>确认</b>
      </p>
    </div> -->
  </div>
</template>

<script>
import { Row, Col, Toast, List } from 'vant';
import { defure } from '@/api/api';
import choise from '@/assets/images/choise.png';

export default {
  name: 'xitpt',
  data() {
    return {
      tiw: '',
      actv: 0,
      choise,
      tabvlue: [
        { tab: '腻子施工', id: 0 },
        { tab: '涂料施工', id: 2 },
        {
          tab: '防水施工',
          id: 5,
        },
        { tab: '真石漆施工', id: 7 },
        { tab: '粉刷石膏', id: 14 },
        { tab: '水泥砂浆', id: 1 },
        {
          tab: '防火施工',
          id: 3,
        },
        {
          tab: '防腐施工',
          id: 4,
        },
        { tab: '划线施工', id: 8 },
        { tab: '地坪施工', id: 12 },
      ],
      loading: false,
      finished: false,
      active: 0,
      images: [],
      imageurl: '',
      quy: '',
      getimhi: '',
      page: 0,
    };
  },

  created() {
    this.quy = this.$route.query.id;
  },

  methods: {
    onLoad() {
      this.page++;
      if (this.quy == '1') {
        defure({ page: this.page, size: 15, officialUrl: this.active }).then(
          (res) => {
            let list = res.data.data.list;
            setTimeout(() => {
              list.forEach((item) => {
                this.images.push(item.image);
              });
              this.imageurl = this.images[0];
            }, 1000);
            this.loading = false;
            this.finished = res.data.data.page >= res.data.data.pages;
          }
        );
      } else if (this.quy == '2') {
        // defure({ page: this.page, size: 10, modes: 26 }).then((res) => {
        //   let list = res.data.data.list;
        //   setTimeout(() => {
        //     list.forEach((item) => {
        //       this.images.push(item.image);
        //     });
        //     this.imageurl = this.images[0];
        //   }, 0);
        //   this.loading = false;
        //   this.finished = res.data.data.page >= res.data.data.pages;
        // });
      }
      setTimeout(() => {
        let imghei = this.$refs.imghei;
        if (imghei != undefined) {
          this.getimhi = imghei[0].offsetWidth;
        } else {
          this.getimhi = 100;
        }
      }, 1100);
    },
    quere(item, index) {
      this.actv = index;
      this.imageurl = item;
      if (this.quy == '1') {
        this.$router.replace({
          path: '/info/project-publish/-1?imagurl=' + this.imageurl,
        });
      } else {
        this.$router.replace({
          path: '/contract/edit?imagurl=' + this.imageurl,
        });
      }
    },
    // sure() {},
    // tab按钮
    ontap(index, id) {
      this.active = id;
      this.images = [];
      this.page = 0;
      this.onLoad();
    },
  },
  components: {
    [Toast.name]: Toast,
    [List.name]: List,
    [Row.name]: Row,
    [Col.name]: Col,
  },
};
</script>

<style lang="scss" scoped>
.pubak {
  color: #afadae;
  background: #ededed;
  .tanspan {
    font-size: 11.8px;
  }
}
/deep/ .van-list__finished-text {
  display: none !important;
}

.getback {
  color: #fff;
  background: #fe8f00;
  .tanspan {
    font-size: 12px;
  }
}
.getbackr {
  .tanspan {
    font-weight: bold;
    font-size: 0.81rem;
  }
}
.pubakr {
  .tanspan {
    font-size: 0.8rem;
  }
}
.martop {
  margin-top: 5px;
}
</style>
